<template>
	<div class="container" >
		<el-form label-width="140px" :model="ruleForm" :rules="rules">
			
		
		<div class="container">
		     <h3>企业信息</h3>
		     <el-row :gutter="20" style="margin-top:20px;">
		             <el-col :span="10" >
		     			<el-form-item label="企业简称">
		     			<el-input class="handle-input" placeholder="追溯码上展示，不得超过6个字" v-model="ruleForm.abbreviation" style="width:300px"></el-input>
		     			</el-form-item>
		     			<!-- <el-form-item label="所在区域：" prop="area">
		     				<el-cascader size="large" :options="options" style="width:300px" v-model="form.area" ></el-cascader>
		     			</el-form-item> -->
		     
		     			<el-form-item label="营业执照照片">
		     				<el-upload
		     					class="upload-poster"                               
		     					action="https://jsonplaceholder.typicode.com/posts/"
		     					:show-file-list="false"
		     					:on-change="imgPreview3"
		     					:auto-upload="false">
		     					<img v-if="licenseImg1" :src="licenseImg1" class="avatar">
		     					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		     				</el-upload>
		     				jpg、png、gif格式，不超过2MB
		     			</el-form-item>
		             </el-col>
		         <el-col :span="12">
		         <el-form-item label="企业名称">
		             <el-input class="handle-input" placeholder="企业全称" v-model="ruleForm.name" style="width:300px"></el-input>
		         </el-form-item>
		     	
		         <el-form-item label="统一社会信用代码">
		             <el-input class="handle-input" placeholder="请输入统一社会信用代码" v-model="ruleForm.creditCode" style="width:300px"></el-input>
		         </el-form-item>
		         <el-form-item label="注册地址">
		             <el-input class="handle-input" placeholder="请填写详细注册地址" v-model="ruleForm.address" style="width:300px"></el-input>
		         </el-form-item>
		         
		          <el-form-item label="营业期限：">
		             <el-date-picker
		                 value-format="yyyy/MM/dd"
		                 format="yyyy/MM/dd"
		                 style="width:300px"
		                 v-model="value1"
		                 type="daterange"
		                 :disabled="disabled1"
		                 range-separator="至"
		                 start-placeholder="开始日期"
		                 end-placeholder="结束日期">
		             </el-date-picker>
		             <el-checkbox style="margin-left:10px;" v-model="checked1" @change="changeState1">长期</el-checkbox>
		         </el-form-item> 
		     </el-col>
		     </el-row>
		 </div>
		<div class="container" style="margin-top:20px">
		     <h3 style="margin-bottom: 20px">法人信息</h3>
		     <el-row class="demo-ruleForm">
		        <el-col :span="10">
		            <el-form-item label="身份证照片：（人像面）" label-width="100px" style="margin-left:35px;">
		                 <upload-img ref="uploadChang1" :maxNum="1" :files='listUrl1' style="width:300px"></upload-img>
		             </el-form-item>
		             <el-form-item label="身份证照片：（国徽面）" label-width="100px" style="margin-left:35px;">
		                 <upload-img ref="uploadChang2" :maxNum="1" :files='listUrl2' style="width:300px"></upload-img>
		             </el-form-item>
		         </el-col>
		         <el-col :span="14">
		             <el-form-item label="法人代表：">
		                 <el-input v-model="ruleForm.legalName" style="width:300px"></el-input>
		             </el-form-item>
		             <el-form-item label="身份证号：">
		                 <el-input v-model="ruleForm.legalID" style="width:300px"></el-input>
		             </el-form-item>
		             
		             <el-form-item label="证件有效期：">
		                 <el-date-picker
		                     value-format="yyyy/MM/dd"
		                     format="yyyy/MM/dd"
		                     style="width:300px"
		                     v-model="value2"
		                     type="daterange"
		                     :disabled="disabled2"
		                     range-separator="至"
		                     start-placeholder="开始日期"
		                     end-placeholder="结束日期">
		                 </el-date-picker>
		                 <el-checkbox style="margin-left:10px;" v-model="checked2" @change="changeState2">长期</el-checkbox>
		             </el-form-item>
					 <!--<el-form-item label="证件期限">
                            <el-col :span="7" style="margin-left:-10px;">
                                <el-date-picker  type="date" placeholder="选择日期" :disabled="disabled" v-model="date1" style="width: 100%;"></el-date-picker>
                            </el-col>
                             <el-col class="line" style="margin-left:5px;" :span="2">至</el-col>
                             <el-col :span="7">
                                <el-date-picker type="date" placeholder="选择日期" :disabled="disabled" v-model="date2" style="width: 100%;"></el-date-picker>
                            </el-col>
                            <el-col :span="4">
                                <el-checkbox v-model="checked" @change="chedkeds">长期</el-checkbox>
                            </el-col>
                        </el-form-item>-->
		            <el-form-item label="手机号：" style="width:500px">
		                 <el-input v-model="ruleForm.legalPhone" style="width:300px"></el-input>
		             </el-form-item>
		         </el-col>
		     </el-row>
		 </div> 
								
		<div class="container" style="margin-top:20px">
			 <h3 style="margin-bottom: 20px">运营者信息</h3>
			 <el-row class="demo-ruleForm">
				<el-col :span="10">
					<el-form-item label="身份证照片：（人像面）" label-width="100px" style="margin-left:35px;">
						<upload-img ref="uploadChang3" :maxNum="1" :files='listUrl3' style="width:300px"></upload-img>
					</el-form-item>
					<el-form-item label="身份证照片：（国徽面）" label-width="100px" style="margin-left:35px;">
						<upload-img ref="uploadChang4" :maxNum="1" :files='listUrl4 ' style="width:300px"></upload-img>
					</el-form-item>
				</el-col>
				<el-col :span="14">
				
					<el-form-item label="运营人代表：">
						<el-input v-model="ruleForm.operateName" style="width:300px"></el-input>
					</el-form-item>
					<el-form-item label="身份证号：">
						<el-input v-model="ruleForm.operateID" style="width:300px"></el-input>
					</el-form-item>
					<el-form-item label="营业期限：">
							<el-date-picker
								value-format="yyyy/MM/dd"
								format="yyyy/MM/dd"
								style="width:300px"
								v-model="value3"
								type="daterange"
								:disabled="disabled3"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期">
							</el-date-picker>
						   <el-checkbox style="margin-left:10px;" v-model="checked3" @change="changeState3">长期</el-checkbox>
					</el-form-item>
					<el-form-item label="手机号：" style="width:500px">
						<el-input v-model="ruleForm.operatePhone" style="width:300px"></el-input>
					</el-form-item>
				</el-col>
			 </el-row>
		 </div> 
		 <el-form-item class="footerFixed" label-width="0px">
		     <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
		     <el-button @click="backPage">返回</el-button>
		 </el-form-item>
		 </el-form>
	</div>                                                                                                                                                                                         
</template>

<script>
	import uploadImg from '../../../common/uploadImg';
	export default{
		components: {
		    uploadImg,
		},
		data(){
			return{
				ruleForm:{},
				checked1:false,
				checked2:false,
				checked3:false,
				listUrl1:'',
				listUrl2:'',
				listUrl3:'',
				listUrl4:'',
				value1:'',
				value2:'',
				value3:'',
				disabled1:false,
				disabled2:false,
				disabled3:false
			}
		},
		mounted(){
			
		},
		methods:{
			// 返回上一页
			backPage(){
				this.$router.go(-1)
			},
			
			
			// 提交
			submitrule(){
				
			},
		}
	}
</script>

<style scoped>
	.avatar-uploader .el-upload {
	   border: 1px dashed #d9d9d9;
	   border-radius: 6px;
	   cursor: pointer;
	   position: relative;
	   width:180px;
	   overflow: hidden;
	 }
	 
	 .avatar-uploader .el-upload:hover {
	   border-color: #409EFF;
	 }
	 .el-upload--text{
	     width:180px;
	 }
	 .avatar-uploader-icon {
	   font-size: 28px;
	   color: #8c939d;
	   width: 178px;
	   height: 178px;
	   line-height: 178px;
	   text-align: center;
	 }
	 .avatar {
	   width: 178px;
	   height: 178px;
	   display: block;
	 }
</style>